<template>
	<view class="category">
		<view class="category_left">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view v-for="(v,k) in list" :key="k" :class="k==index?'item ck':'item'" @click="index=k">{{v.name}}</view>
			</scroll-view>
		</view>
		
		<!-- <view class="category_right">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="class_children" v-for="(v,k) in (list[index]?list[index].children:[])" :key="k">
					<view class="title">{{v.name||'商品分类'}}</view>
					<view class="list">
						<uni-grid :column="3" :show-border="false"  :square="false" :highlight="false">
							<uni-grid-item class="grid_item" v-for="(vo,key) in (v.children||[])" :key="key">
							    <view class="item" @click="$nav('/pages/goods/list?class_id='+vo.id)">
							    	<image :src="vo.thumb" mode="aspectFit"></image> 
							    	<view  class="goods_name">{{vo.name||'商品分类'}}</view>
							    </view>
							</uni-grid-item>
						</uni-grid>
					</view>
				</view>
				
			</scroll-view>
		</view> -->

		<view class="category_right">
			<scroll-view scroll-y="true" class="scroll-Y">
				<!-- <view class="class_children" v-for="(v,k) in (list[index]?list[index].children:[])" :key="k"> -->
					<!-- <view class="title">{{v.name||'商品分类'}}</view> -->
					<view class="list">
						<uni-grid :column="3" :show-border="false"  :square="false" :highlight="false">
							<uni-grid-item class="grid_item" v-for="(vo,key) in (list[index]?list[index].children:[])" :key="key">
							    <!-- <view class="item" @click="$nav('/pages/goods/list?class_id='+vo.id)"> -->
									<view class="item" @click="$nav('/pagesUser/integral/skill?name='+vo.name)">
							    	<image :src="vo.thumb" mode="aspectFit"></image> 
							    	<view  class="goods_name">{{vo.name||'商品分类'}}</view>
							    </view>
							</uni-grid-item>
						</uni-grid>
					</view>
				<!-- </view> -->
			</scroll-view>
		</view>

		
	</view>
</template>

<script>
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	export default {
		components: {uniGrid,uniGridItem},
		data() {
			return {
				index:0,
				list:[],
			};
		},
		onLoad() {
			let class_id = uni.getStorageSync('class_id');
			if(class_id && parseInt(class_id)>0){
				this.index = class_id;
				uni.removeStorageSync('class_id');
			}
			this.getData();
		},
		methods:{
			getData(){
				this.$http(this.$api.getGoodsClasses).then(res=>{
					this.list = res.data;
					console.log('查看数据',res)
				})
			}
		}
	}
</script>

<style lang="scss">

.category{border-top: 1px solid #f1f1f1;height: 100%;font-size: $uni-font-size-base;display: flex;}
.category_left{
	flex: 0 0 180rpx;
	border-radius:0 10rpx 10rpx 0;
	line-height: 120rpx;
	
	height: 100%;
	background: #f8f8f8;
	.item{
		padding-left: 30rpx;
		height: 120rpx;
		border-left: 8rpx solid #f8f8f8;
		overflow: hidden;
		width: 180rpx;
		&.ck{
			border-left: 8rpx solid $uni-color-error;
			background: #fff;
		}
	}
	
}
.category_right{
	flex: 1;
	.title{font-weight: bold;padding: 20rpx 30rpx;margin-bottom: 20rpx;font-size: $uni-font-size-base;}
	.list{
		.item{
			margin-left:20rpx;
			margin-right:20rpx;
			margin-bottom: 30rpx;
			border-radius: 10rpx;
			.goods_name{text-align: center;font-size: $uni-font-size-sm;line-height: 55rpx;}
			image{width: 100%;background: #eee;border-radius: 10rpx;height: 140rpx;box-sizing: border-box;border:1px solid #eee;}
		}
	}
}
.scroll-Y{height: 100%;}
page{height: 100%;background-color: #fff;}
</style>
